<template>
    <div class="modal">
        <div class="mask" @click="changeIsShowLoginModal(false)"></div>
        <div class="loginbox">
            <!-- X -->
            <div class="close" @click="changeIsShowLoginModal(false)"></div>
            <!-- 小导航 -->
            <div class="box">
                <span :class="{ active: isShowPhone }" @click="isShowPhone = true">手机号码登录</span>
                <i>|</i>
                <span :class="{ active: !isShowPhone }" @click="showQr">微信扫码登录</span>
            </div>
            <div class="content">
                <div class="phonebox" v-show="isShowPhone">
                    <div class="row">
                        <input type="number" value="请输入手机号码" v-model="phoneNumber">
                    </div>
                    <div class="row">
                        <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail"
                            @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock"
                            :slider-text="msg" :imgs="imgsall"></slide-verify>
                    </div>
                    <div class="row">
                        <input class="yzm" type="text" value="请输入短信验证码" v-model="codeval">
                        <button class="btncode" @click="getcode" v-show="!isShowcount">获取验证码</button>
                        <button class="btncode" v-show="isShowcount">{{ count }}S</button>
                    </div>
                    <div class="row">
                        <button class="btnlogin" @click="submitFn">登录</button>
                    </div>

                </div>
                <div class="qrbox" v-show="!isShowPhone" id="weixin">微信扫码登录</div>
            </div>
        </div>
    </div>
</template>

<script>
import { SendSmSAPI, phoneReginAPI, bindingAPI, UserProfilesApi } from "@/request/api"
import { mapMutations, mapActions } from "vuex"
import { validatePhoneNumber } from "@/utlis"
export default {
    data() {
        return {
            isShowPhone: true,
            msg: "向右滑动",
            imgsall: [
                require("../assets/img/团长1.webp"),
                require("../assets/img/龙炮.webp"),
                require("../assets/img/p483760134.jpg"),
                require("../assets/img/f7b29978805f0c4a99cd8a49b0c7dc45.png"),
            ],
            phoneNumber: "",
            count: 5,
            isShowcount: false,
            codeval: ""
        }
    },
    methods: {
        ...mapMutations({
            changeIsShowLoginModal: "logModal/changeIsShowLoginModal",
            changeIsLogined: "Logined/changeIsLogined",
        }),
        ...mapActions({
            asyncIsShowToast: "Toast/asyncIsShowToast",
            asyncchangeuserInfo: "userInfo/asyncchangeuserInfo"
        }),
        // 拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1);
            this.msg = "login success, 耗时 " + ms + "s";
        },
        // 拼图失败
        onFail() {
            this.onRefresh(); // 重新刷新拼图
        },
        // 拼图刷新
        onRefresh() {
            this.msg = "再试一次";
        },
        // 提取登录
        getVal() {

            // 对比手机号
            if (!validatePhoneNumber(this.phoneNumber)) {
                // alert("请输入正确手机号")
                this.asyncIsShowToast({
                    isshow: true,
                    msg: "请输入正确手机号",
                    type: "danger"
                })
                return
            }
            // 判断验证码
            if (this.msg == "向右滑动" || this.msg == "再试一次") {
                // alert("请滑动验证码(再试一次)")
                this.asyncIsShowToast({
                    isshow: true,
                    msg: "请滑动验证码(再试一次)",
                    type: "danger"
                })
                return
            }
            return true
        },
        // 验证码
        async getcode() {

            let flag = this.getVal()

            if (!flag) return

            let res = await SendSmSAPI({
                phone: this.phoneNumber,
            })
            console.log("res", res);
            // 倒计时
            if (!res) return;
            if (res.code == 0) {
                this.isShowcount = true;
                let times = setInterval(() => {
                    this.count--
                    if (this.count == 0) {
                        clearInterval(times)
                        this.count = 5
                        this.isShowcount = false;
                    }
                }, 1000)
            }

        },

        // 登录
        async submitFn() {

            // if (!this.getVal()) return;

            // if (this.codeval == "") {
            //     alert("验证码不能位空！")
            //     return
            // }

            // if (this.msg == "向右滑动" || this.msg == "再试一次") {
            //     alert("请滑动验证码(再试一次)")
            //     return
            // }
            let uuid = localStorage.getItem("uuid")
            let res = null
            if (uuid) {
                res = await bindingAPI({
                    verifyCode: this.codeval,
                    phone: this.phoneNumber,
                    uuid,
                })
                console.log('登录请求1');
            } else {
                res = await phoneReginAPI({
                    verifyCode: this.codeval,
                    phone: this.phoneNumber
                })
                console.log('登录请求2');
            }
            console.log("登录请求", res);
            // alert("")
            if (!res) return
            // 弹出登录成功
            alert("登录成功")
            // 本地存储请求头
            localStorage.setItem("x-auth-token", res["x-auth-token"])
            // 登录框隐藏
            this.changeIsShowLoginModal(false)
            // 登录成功显示购物车
            this.changeIsLogined(true)
            // 删除uuid
            localStorage.removeItem("uuid")

            // let user = await UserProfilesApi()
            // console.log("用户信息:", user);
            this.asyncchangeuserInfo()
        },
        showQr() {
            this.isShowPhone = false;
            //获取二维码 并展示
            // 申请微信登录二维码
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(
                    window.btoa("http://127.0.0.1:8080" + _this.$route.path)
                ),
                // 调用样式文件
                href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLA0KLmltcG93ZXJCb3ggLmluZm8gew0KICBkaXNwbGF5OiBub25lOw0KfQ==",
            });
        }
    },

}

</script>

<style lang="less" scoped>
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;

    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }

    .loginbox {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url("../assets/img/login-box-bg.png");

        .close {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 60px;
            top: 15px;
            background: url("../assets/img/close.png");
            cursor: pointer;
        }

        .box {
            text-align: center;
            margin-top: 40px;

            span {
                cursor: pointer;
                margin: 0 10px;
                color: gray;

                &.active {
                    color: black;
                }
            }
        }

        .content {
            width: 355px;
            // background-color: yellow;
            margin: 10px auto 0;

            .phonebox {
                .row {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin: 20px 0;

                    input {
                        flex: 1;
                        height: 50px;
                        outline: none;
                        text-indent: 1em;
                    }

                    button {
                        background-color: #0a328e;
                        border: none;
                        color: #fff;
                        font-weight: bold;
                    }

                    .btncode {
                        width: 86px;
                        height: 56px;
                        margin-left: 10px;
                    }

                    .btnlogin {
                        width: 100%;
                        height: 50px;
                        font-size: 20px;
                    }
                }
            }
        }

        .qrbox {
            text-align: center;
        }
    }
}

/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;

    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }

    .slide-verify-block {
        width: 85px;
        height: 136px;
    }

    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }

    &:hover {
        canvas {
            display: block;
        }

        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>